<template>
    <view class="userLabel">
        <view class="userLabel-L">
            <up-image
                src="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1708448400&t=3390aeb1700cfaf3404c98cb4b41722b"
                :width="width || '120rpx'" height="118rpx" :radius="radius"></up-image>
            <view class="info">
                <text class="username">
                    {{ item.name }}
                </text>
                <text class="address" v-if="item.address">
                    {{ item.address }}
                </text>
                <text class="num" v-if="item.address">
                    {{ item.num }}
                </text>
                <text class="signature" v-else>
                    {{ item.signature || item.num }}
                </text>
            </view>
        </view>
        <view class="followBtn" @click="clickView">
            {{ handle }}
        </view>
    </view>
</template>

<script lang="ts" setup>
defineProps(['item', 'width', 'radius', 'handle'])
const emit = defineEmits(["clickView"])
const clickView = () => {
    emit("clickView")
}
</script>

<style lang="scss" scoped>
.userLabel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx;

    .userLabel-L {
        display: flex;
        flex-direction: row;

        .info {
            display: flex;
            flex-direction: column;
            margin-left: 30rpx;

            .username {
                font-size: 37rpx;
                font-weight: bold;
                margin-top: 10rpx;
                margin-bottom: 6rpx;
            }

            .signature {
                font-size: 32rpx;
                margin-top: 5rpx;
                color: #B5B5B5;
            }

            .address {
                font-size: 24rpx;
                color: #1F2225;
            }

            .num {
                margin-top: 3rpx;
                font-size: 20rpx;
                color: #9472FF;
            }
        }
    }

    .followBtn {
        font-size: 28rpx;
        color: #fff;
        background: #9472FF;
        border-radius: 40rpx;
        padding: 10rpx 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>